<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
</head>
<body>
<div id="app">
    <!-- 初始消息 -->
    <p>Original message:{{ message }}</p>

    <!-- 经过计算属性处理后的消息 -->
    <p>computed reverse message: {{ reversedMessage }}</p>
</div>
</body>
<script src="../vue.js"></script>
<script>
    const rw = new Vue({
        el:"#app",
        data:{
            message:"hello 大杰宝"
        },
        computed:{
            // 定义计算属性，是一个函数
            // 将实例中的数据通过空格分割后反转，再通过空格连接起来
            reversedMessage: function() {
                return this.message.split('').reverse().join('')
            }
        }
    })
    rw.message = '为天下祈一个“春”字'
    console.log(rw.reversedMessage)
</script>
</html>